<template>

  <div class="product">
    <!-- 导航栏 -->
    <div class="navBar">
      <van-sticky>
        <van-nav-bar style="background-color:#409eff" left-arrow left-text="" @click-left="goback">
          <template #title>
            <div style="color:white">
              菜品分类
            </div>
          </template>
          <template #left>
            <div style="color:white">
              <van-icon name="arrow-left" color="white" />
              返回
            </div>
          </template>
        </van-nav-bar>
      </van-sticky>
    </div>
    <!-- 产品内容展示区 -->
    <div class="productContent">

      <!-- 左侧侧边导航栏 -->
      <div class="categorySideBar">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item v-for="item in categoryData" 
          :badge="item.badge" :key="item.id" :title="item.name">
          </van-sidebar-item>
        </van-sidebar>
      </div>

      <!-- 右侧产品展示栏 -->
      <div class="productList">
        <van-card v-for="item in myProducts" :key="item.id" :num="item.number" :price="item.price"
          :desc="item.description" :title="item.name" :thumb="item.photo">
          <template #tags>
            <van-tag plain type="danger">{{item.category.name}}</van-tag>
          </template>
          <template #footer>
            <van-stepper v-model="item.number" theme="round" :default-value="0" :min='0' button-size="22" disable-input
              @change="numShopCar(item)" />
          </template>
        </van-card>

        <div style="height:50px"></div>

        <!-- 底部提交订单按钮 -->
        <van-submit-bar :price="total*100" button-color="#409eff" button-text="提交订单" @submit="onSubmit">
          <van-goods-action-icon :badge="badge" icon="cart-o" text="购物车" @click="onClickShopcar" />
        </van-submit-bar>

      </div>
    </div>



    <!-- 查看购物车面板 -->
    <van-action-sheet class="van-action-sheet" v-model="show" title="我的购物车">
      <!-- 定义结构 -->
      <div class="content">
        <div class="">
          <van-card v-for="item in orderLines.values()" :key="item.id" :num="item.num" :price="item.price"
            :desc="item.description" :title="item.name" :thumb="item.photo">
            <template #tags>
              <van-tag plain type="danger">{{item.category.name}}</van-tag>
            </template>
            <!-- <template #footer>
              <van-stepper v-model="item.number" theme="round" :default-value="0" :min='0' button-size="22"
                disable-input @change="dialogNumShopCar(item)" />
            </template> -->
          </van-card>

        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
  import {
    mapActions,
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'

  export default {
    data() {
      return {
        // 默认被选中的栏目的索引
        activeKey: 0,
        productCategoryId: '',
        num: '',
        show: false,
        myshopcar: [],
        // myProducts:[],
        flag: 0
      }
    },
    methods: {
      ...mapActions('category', ['getCategoryDataVuex']),
      ...mapActions('product', ['getProductDataVuex']),
      ...mapActions('shopcar', ['mygetProductDataVuex']),
      ...mapMutations('shopcar', ['addShopCar', 'SET_vuex_productCategoryId']),
      ...mapMutations('category', ['SET_BADGE']),
      ...mapMutations('product', ['GET_PRODUCTDATA']),
      //返回上一级页面
      goback() {
        this.$router.go(-1)
      },
      getCategoryData() {
        this.getCategoryDataVuex({
          page: 1,
          pageSize: 12
        })
      },
      getProductData() {
        this.getProductDataVuex({
          page: 1,
          pageSize: 100,
          status: '正常',
        })
      },
      //侧边栏监听事件
      onChange(index) {
        
        this.productCategoryId = this.categoryData[index].id
        this.SET_vuex_productCategoryId(this.productCategoryId)
      },


      //提交订单
      onSubmit() {
        if (this.total > 0) {
          this.$router.push('/manager/orderConfirm')
        } else {
          this.$toast.fail('您还没有选购商品')
        }
      },

      //打开对话框
      onClickShopcar() {

        this.myshopcar = []
        for (let orderLine of this.orderLines.values()) {
          if (orderLine.number != 0)
            this.myshopcar.push(orderLine);
        }

        this.show = true;
      },

      //监听步进器发生改变
      //让步进器监听到的订单添加到购物车当中
      numShopCar(item) {

        //item 代表每一条订单
        let orderLine = {
          productId: item.id,
          name: item.name,
          price: item.price,
          num: item.number,
          photo: item.photo,
          productCategoryId: item.productCategoryId,
          description: item.description,
          category: item.category
        }
        this.addShopCar(orderLine);
      },

    },
    computed: {
      ...mapState('category', ['categoryData']),
      ...mapState('product', ['productData']),
      ...mapGetters('shopcar', ['total', 'badge', 'myProducts']),
      ...mapState('shopcar', ['orderLines']),
      // myProducts: function () {
      //   return this.productData.filter(item => item.productCategoryId == this.productCategoryId)
      // }
    },
    created() {
      //将首页传递过来的activeKey的值赋值到当前页面中进行一个覆盖
      this.activeKey = this.$route.query.activeKey
    
      this.productCategoryId = this.$route.query.productCategoryId
      this.SET_vuex_productCategoryId(this.productCategoryId)
      this.getCategoryData()
      this.getProductData()
      setTimeout(() => {
        if (this.$store.state.shopcar.prouductData_shopcar.length == 0) {
          this.$store.state.shopcar.prouductData_shopcar = JSON.parse(JSON.stringify(this.$store.state.product
            .productData))
        }
      }, 500);



    },
  }
</script>

<style scoped>
  /* 产品展示区域的样式 */
  .productContent {
    display: flex;
    height: calc(100vh - 100px)
  }


  /* 左侧样式 */
  .categorySideBar {
    width: 150px;
    resize: horizontal;
    overflow: auto;
   height: 500px;
  }

  /* 右侧样式 */
  .productList {
    flex: 1;
    overflow-y: auto;
    position: relative;
  }

  /* 设置侧边导航栏的样式 */
  .van-sidebar {
    overflow-y: auto;
    width: 150px;
  }

  .van-sidebar-item {
    font-size: 16px;
    text-align: center;
    height: 3.5rem;
  }

  /* 选中颜色 */
  .van-sidebar-item--select::before {
    background-color: #8430FF;
  }

  /* 顶部总价计算 */
  .van-submit-bar__bar {
    width: 95%;
    position: absolute;
    bottom: 50px;
    background-color: white;
  }

  .van-stepper--round .van-stepper__plus {
    background-color: #409eff;

  }

  /* 我的购物车对话框样式 */
  .content {
    padding: 16px 16px 160px;
  }
</style>